import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { propType } from 'graphql-anywhere';
import { StyleSheet } from 'react-native';
import { ListItem } from 'react-native-elements';

const styles = StyleSheet.create({
  rightTitle: {
    color: 'black'
  },
  discount: {
    color:'#21BA45'
  }
});

const OrderPriceItem = ({pricingDetail:{discount, imageUrl, quantity, quantityUnit,
  description, price, subDescription, subPrice}}) => (
  <ListItem hideChevron roundAvatar avatar={imageUrl&&{uri:imageUrl}} title={`${description}${quantity?` x ${quantity}`:''}${quantityUnit?` ${quantityUnit}`:''}`}
    titleNumberOfLines={5} subtitle={subDescription||null} 
    // rightTitle={`${price?`${discount?'-':''}$${price.toFixed(2)}`:''}${subPrice?` + $${subPrice.toFixed(2)}`:''}`||null} 
    rightTitleStyle={discount?styles.discount:styles.rightTitle}/>
);

OrderPriceItem.fragments = {
  pricingDetail: gql`
    fragment OrderPriceItem on PricingDetail {
      discount
      productId
      quantity
      productName
      examptQuantity
      quantityType
      quantityUnit
      imageUrl
      description
      subDescription
      price
      subPrice
      insurance
      special
    }
  `
};

OrderPriceItem.propTypes = {
  pricingDetail: propType(OrderPriceItem.fragments.pricingDetail).isRequired
};

export default OrderPriceItem;
